{% extends "editor/state_editor_row.html" %}

{% block id %}rules{% endblock %}

{% block row %}
  <div ng-repeat="(handlerName, handler) in widgetHandlers">
    {{ super() }}
  </div>
{% endblock %}

{% block label %}
  when readers <[handlerName]>:
{% endblock %}

{% block link %}
  https://code.google.com/p/oppia/wiki/Rules
{% endblock %}

{% block line1 %}
  <div class="row-fluid">
    <div ng-repeat="rule in handler" ng-hide="$last">
      <div class="span9" style="padding: 5px;">
        <rule-editor rule="rule" choices="widgetCustomizationArgs.choices" exploration-id="explorationId">
        </rule-editor>
      </div>

      <div class="span3">
        <span class="pull-right">
          <button ng-click="openEditRuleModal(handlerName, $index)" class="oppia-rule-ctrl">Edit</button>
          <button ng-show="$index != 0" ng-click="swapRules(handlerName, $index, $index - 1)" class="oppia-rule-ctrl">⇑</button>
          <span ng-hide="$index != 0" class="oppia-grayed oppia-rule-ctrl">⇑</span>

          <button ng-show="$index < handler.length - 2" ng-click="swapRules(handlerName, $index, $index + 1)" class="oppia-rule-ctrl">⇓</button>
          <span ng-hide="$index < handler.length - 2" class="oppia-grayed oppia-rule-ctrl">⇓</span>

          <button ng-click="deleteRule(handlerName, $index)" class="oppia-rule-ctrl"> &times; </button>
        </span>
      </div>
    </div>
  </div>
{% endblock %}

{% block line2 %}
  <div class="row-fluid" ng-show="widgetId != 'Continue'">
    <div class="span9">
      <table style="width: 100%">
        <tr>
          <td style="vertical-align: top; padding: 10px;" class="oppia-lightly-grayed">
            <div class="oppia-align-center">
              (<em>New rules will be added here.</em>)
            </div>
          </td>
        </tr>
      </table>
    </div>

    <div class="span3">
      <span class="pull-right" style="padding-top: 5px;">
        <button ng-click="openAddRuleModal(handlerName)" class="oppia-rule-ctrl"> Add new rule </button>
      </span>
    </div>
  </div>
{% endblock %}

{% block line3 %}
  <div class="row-fluid">
    <div class="span9" style="padding: 5px;">
      <rule-editor rule="handler[handler.length - 1]" choices="widgetCustomizationArgs.choices" exploration-id="explorationId">
      </rule-editor>
    </div>
    <div class="span3">
      <span class="pull-right">
        <button ng-click="openEditRuleModal(handlerName, handler.length - 1)" class="oppia-rule-ctrl">Edit</button>
        <span class="oppia-grayed oppia-rule-ctrl"> ⇑ </span>
        <span class="oppia-grayed oppia-rule-ctrl"> ⇓ </span>
        <span class="oppia-grayed oppia-rule-ctrl"> &times; </span>
      </span>
    </div>
  </div>
{% endblock %}
